<template>
	<view class="address-edit-content">
		<view class="edit-item">
			<text class="tit">姓名</text>
			<input class="uni-input" type="text" placeholder="请输入收件人姓名" maxlength="30" name="name" value="" v-model="formData.consigner" />
		</view>
		<view class="edit-item">
			<text class="tit">手机号</text>
			<input class="uni-input" type="number" placeholder="请输入手机号" maxlength="11" value="" v-model="formData.mobile" />
		</view>
		<view class="edit-item">
			<text class="tit">固定电话</text>
			<input class="uni-input" type="text" placeholder="固定电话（选填）" maxlength="20" value="" v-model="formData.phone" />
		</view>
		<view class="edit-item">
			<text class="tit">地址</text>
			<pick-regions :default-regions="defaultRegions" @getRegions="handleGetRegions">
				<text class="select-address" :class="{ empty: !formData.full_address }">{{ formData.full_address ? formData.full_address : '请选择省市区县' }}</text>
			</pick-regions>
		</view>
		<view class="edit-item">
			<text class="tit">详细地址</text>
			<input class="uni-input" type="text" placeholder="请输入详细地址" maxlength="50" v-model="formData.address" />
		</view>
		<button type="primary" class="add" @click="saveAddress">保存</button>
		<loading-cover v-if="edit_id" ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import pickRegions from '@/components/pick-regions/pick-regions.vue';
import loadingCover from '@/components/loading/loading.vue';
import validate from 'common/js/validate.js';
export default {
	components: {
		loadingCover,
		pickRegions
	},
	data() {
		return {
			edit_id: 0,
			formData: {
				consigner: '',
				mobile: '',
				province: '',
				city: '',
				district: '',
				address: '',
				phone: '',
				address_id: '',
				full_address: ''
			},
			addressValue: '',
			back: '', // 返回页
			redirect: 'redirectTo', // 跳转方式
			flag: false, //防重复标识
			defaultRegions: []
		};
	},
	mixins: [http],
	onHide() {
		this.flag = false;
	},
	onLoad(option) {
		/* 修改头部信息 */
		let title = '新增收货地址';
		if (option.id) {
			this.edit_id = option.id;
			title = '编辑收货地址';
			this.addressID = option.id;
			this.formData.id = option.id;
			this.getAddressDetail();
		}
		if (option.back) this.back = option.back;
		if (option.redirect) this.redirect = option.redirect;
		uni.setNavigationBarTitle({
			title
		});
	},
	onShow() {},
	methods: {
		/* 获取地址信息 */
		getAddressDetail() {
			this.sendRequest({
				url: 'System.Member.addressDetail',
				data: { id: this.formData.id },
				success: res => {
					if (res.code == 0) {
						this.formData.consigner = res.data.consigner;
						this.formData.mobile = res.data.mobile;
						this.formData.address = res.data.address;
						this.formData.phone = res.data.phone;
						this.defaultRegions = [res.data.province, res.data.city, res.data.district];
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},
		// 获取选择的地区
		handleGetRegions(regions) {
			this.formData.full_address = '';
			this.formData.full_address += regions[0] != undefined ? regions[0].label : '';
			this.formData.full_address += regions[1] != undefined ? '-' + regions[1].label : '';
			this.formData.full_address += regions[2] != undefined ? '-' + regions[2].label : '';
			this.addressValue = '';
			this.addressValue += regions[0] != undefined ? regions[0].value : '';
			this.addressValue += regions[1] != undefined ? '-' + regions[1].value : '';
			this.addressValue += regions[2] != undefined ? '-' + regions[2].value : '';
		},
		saveAddress() {
			if (this.flag) return;
			this.flag = true;
			if (this.vertify()) {
				let addressValueArr = this.addressValue.split('-'),
					parmas = {},
					ajax_url = '';

				if (!this.formData.id) {
					parmas = {
						consigner: this.formData.consigner,
						mobile: this.formData.mobile,
						province: addressValueArr[0],
						city: addressValueArr[1],
						district: addressValueArr[2],
						address: this.formData.address,
						phone: this.formData.phone
					};
					ajax_url = 'addAddress';
				} else {
					parmas = {
						id: this.formData.id,
						consigner: this.formData.consigner,
						mobile: this.formData.mobile,
						province: addressValueArr[0],
						city: addressValueArr[1],
						district: addressValueArr[2],
						address: this.formData.address,
						phone: this.formData.phone
					};
					ajax_url = 'updateAddress';
				}
				this.sendRequest({
					url: 'System.Member.' + ajax_url,
					data: parmas,
					success: res => {
						if (res.code == 0) {
							if (this.back != '') {
								this.$util.redirectTo(this.back, {}, this.redirect);
							} else {
								this.$util.redirectTo('/pages/member/address/address', {}, 'redirectTo');
							}
						} else {
							this.$util.showToast({
								title: res.message
							});
							this.flag = false;
						}
					}
				});
			}
		},
		vertify() {
			var rule = [
				{ name: 'consigner', checkType: 'required', errorMsg: '请输入姓名' },
				{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' },
				{ name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' },
				{ name: 'full_address', checkType: 'required', errorMsg: '请选择省市区县' },
				{ name: 'address', checkType: 'required', errorMsg: '详细地址不能为空' }
			];
			var checkRes = validate.check(this.formData, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({ title: validate.error });
				this.flag = false;
				return false;
			}
		}
	}
};
</script>

<style lang="scss">
.edit-item {
	display: flex;
	align-items: center;
	padding: 0 30rpx;
	height: 100rpx;
	background-color: #fff;
	.tit {
		width: 120rpx;
		font-size: $uni-font-size-lg - 2rpx;
	}
	.select-address {
		display: inline-block;
		font-size: $ns-font-size-base;
		margin-left: 20rpx;
		&.empty {
			color: #808080;
			padding: 0;
		}
	}
	input {
		flex: 1;
		font-size: $uni-font-size-lg - 2rpx;
		margin-left: 20rpx;
		padding: 0;
	}
	&:first-of-type {
		margin-top: $uni-spacing-row-base;
	}
}
.address-edit-content > .edit-item + .edit-item {
	border-top: 2rpx solid $ns-border-color-gray;
}
.add {
	margin: 60rpx 30rpx 0;
}
</style>
